﻿@page "/components/buttongroup"

<DocsPage>
    <DocsPageHeader Title="Button Group">
        <Description>
            The <CodeInline>MudButtonGroup</CodeInline> component can be used to group related <CodeInline>MudButtons</CodeInline>.
            <MudText>See also: <MudLink Href="/components/togglegroup">Toggle Group</MudLink></MudText>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic button group">
            </SectionHeader>
            <SectionContent Code="ButtonGroupBasicExample" ShowCode="false">
                <ButtonGroupBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes and colors">
            </SectionHeader>
            <SectionContent Code="ButtonGroupSizesColorsExample" ShowCode="false">
                <ButtonGroupSizesColorsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Vertical button group">
                <Description>With <CodeInline>VerticalAlign="true"</CodeInline> the buttons are displayed vertically.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonGroupVerticalExample" ShowCode="false">
                <ButtonGroupVerticalExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icon buttons">
                <Description><CodeInline>MudButtonGroup</CodeInline> can also make use of <CodeInline>MudIconButton</CodeInline> and <CodeInline>MudToggleIconButton</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonGroupIconButtonExample">
                <ButtonGroupIconButtonExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Split button">
                <Description>A <CodeInline>MudMenu</CodeInline> can be used to create a split button.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ButtonGroupSplitButtonExample">
                <ButtonGroupSplitButtonExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Disable elevation">
                <Description>With <CodeInline>DisableElevation="false"</CodeInline> the dropshadow of button groups with <CodeInline>Variant="Variant.Filled"</CodeInline> is removed.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonGroupDisableElevationExample">
                <ButtonGroupDisableElevationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom styles">
                <Description>With <CodeInline>OverrideStyles="false"</CodeInline> the <CodeInline>MudButtonGroup</CodeInline> no longer overrides the styles of the individual buttons.</Description>
            </SectionHeader>
            <SectionContent Code="ButtonGroupCustomStylesExample">
                <ButtonGroupCustomStylesExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
